<template>
    <el-card>
        <template #header>
            <label style="font-size: 30px; ">浏览记录</label>
        </template>
        <el-empty v-if="dates.length == 0" description="未找到浏览记录"/>
        <div v-else v-for="(date, index) in dates" :key="index">
            <el-timeline>
                <el-timeline-item v-for="(record, i) in date.records" :key="i" :timestamp="record.time" placement="top">
                    <h3 class="title" @click="toLink(record.paperId)">{{record.title}}</h3>
                    <p>{{record.authors.toString()}}</p>
                        <em class="el-icon-delete em-loc" @click="deleteRecord(index, i)"/>
                    <el-divider/>
                </el-timeline-item>
            </el-timeline>
            <el-divider content-position="left">{{date.date}}</el-divider>
        </div>
    </el-card>
</template>

<script>
import { ElMessageBox } from 'element-plus'
import axios from '@/utils/MyAxios'
import qs from "qs"
export default {
    mounted() {
        let user = JSON.parse(localStorage.getItem('user'))
        if (user != null) {
            this.$store.commit('setToken', user.token)
        }
        console.log(this.token)
        this.updateInfo()
    },
    data() {
        return {
            dates: []
        }
    },
    computed: {
        token() {
            return this.$store.state.user.token
        }
    },
    methods: {
        updateInfo() {
            axios.post('/api/record/list', qs.stringify({token: this.token}))
                .then(res => {
                    console.log(res)
                    const data = res.data
                    if (data.code == 0) {
                        this.dates = data.data
                    }
                })
        },
        deleteRecord(index, i) {
            ElMessageBox.confirm(
                '浏览记录将永久删除. 您继续吗?',
                'Warning',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    axios.post('/api/record/delete', qs.stringify({recordId: this.dates.at(index).records.at(i).recordId}))
                        .then(res => {
                            const data = res.data
                            console.log(res)
                            if (data.code == 0) {
                                this.$message.success({message: '删除成功', showClose: true})
                                this.dates.at(index).records.splice(i, 1)
                                if (this.dates.at(index).records.length == 0) this.dates.splice(index, 1)
                            }
                        })
                })
        },
        toLink(id) {
            const { href } = this.$router.resolve({
                path: '/detail',
                query: {
                    paperId: id
                }
            })
            window.open(href, '_blank')
        }
    }
}
</script>

<style scoped>
.author {
    margin-top: 5px;
    margin-left: 10px;
}
.title {
    font-size: 18px;
    cursor: pointer;
    text-decoration: underline;
}
.action {
    padding: 20px;
}
.em-loc {
    font-size: 20px;
    position: absolute;
    top: 30px;
    right: 20px;
    cursor: pointer;
}
</style>